<template>
  <view>
    <!-- 头部二维码 -->
    <view class="QR_code">
      <view class="QR_top">
        <view class="QR_t_fl">
          <view class="QR_state title">待使用</view>
          <view class="order_details"
            >订单号：{{ orderDetailsState.OrderNumber }}</view
          >
        </view>
        <view class="QR_t_fr">
          <text>权益分</text>{{ orderDetailsState.integral }}
        </view>
      </view>
      <view class="QR_code_img">
        <image :src="orderDetailsState.QR_img" mode=""></image>
        <view class="tips">使用时，请向商家出示此二维码</view>
      </view>
    </view>
    <!-- 礼包包含 -->
    <view class="contain">
      <view class="title">{{ orderDetailsState.title }}</view>
      <view class="contain_content">{{
        orderDetailsState.contain_content
      }}</view>
      <text class="seeDetails" @click="goDetails">查看商品详情</text>
    </view>
    <!-- 数量-订单日期-有效日期 -->
    <view class="date-info">
      <view
        class="item"
        v-for="(item, index) in orderDetailsState.data_info"
        :key="index"
      >
        <view class="name">{{ item.name }}</view>
        <view class="data">{{ item.data }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { showCode } from "@/api/user";
import { getOrderById } from "@/api/shopping";
import { onLoad } from "@dcloudio/uni-app";
import { ref, getCurrentInstance, onMounted } from "vue";

const orderDetailsState = ref({
  OrderNumber: null,
  integral: "",
  QR_img: "",
  contain_content: "",
  data_info: [],
  title: "",
  tsoGoodsId: "",
  tsoGoodsType: "",
});
function goDetails() {
}
onMounted(() => {});
onLoad((option) => {
  const { id } = option;
  showCode(id).then((res) => {
    console.log(res);
    if (res.code === 200) {
      orderDetailsState.value.QR_img = res.data;
    }
  });
  getOrderById(id).then((res) => {
    console.log("getOrderById", res);
    orderDetailsState.value.OrderNumber = res.data.id;
    orderDetailsState.value.integral = res.data.tsoTotalPrice;
    orderDetailsState.value.title = res.data.tsoGoodsName;
    orderDetailsState.value.contain_content = res.data.tsgDescription;
    orderDetailsState.value.tsoGoodsId =
      res.data.tsoGoodsId == "0" ? res.data.tsoHotId : res.data.tsoGoodsId;
    orderDetailsState.value.tsoGoodsType = res.data.tsoGoodsId == "0" ? 1 : 0;
    orderDetailsState.value.data_info = [
      { name: "数量", data: res.data.tsoCount },
      { name: "订单日期", data: res.data.tsoCreateTime },
      { name: "有效日期", data: res.data.tsoEffectiveTime },
    ];
  });
});
// export default {
// 	data() {
// 		return {
// 			OrderNumber:7105201698001263188,
// 			integral:'1,899',
// 			// QR_img:'/static/image/user/QR_code_img.png',
// 			QR_img:'',
// 			contain_content:'750礼盒，含青岩猪脚150g*8袋，贵州风肉200g*4袋，天麻50g*2袋，精选特等毛尖50g*2盒',
// 			data_info:[
// 				{name:'数量',data:'1'},
// 				{name:'订单日期',data:'2023/12/16'},
// 				{name:'有效日期',data:'2024/02/16'},
// 			]
// 		}
// 	},
// 	methods: {
// 		goDetails(){
// 			uni.navigateTo({
// 				url:'/pages/details/details'
// 			})
// 		}
// 	},
// onLoad(option) {
// 	const { id } = option
// 	showCode(id).then(res => {
// 		console.log(res);
// 		if(res.code === 200) {
// 			this.QR_img = res.data
// 		}
// 	})
// 	const eventChannel = this.getOpenerEventChannel();
// 	eventChannel.on('acceptDataFromOpenerPage', function(data) {
// 		console.log(data)
// 		this.OrderNumber = data.tsoGoodsId
// 		console.log(this.OrderNumber);
// 	})
// }
// }
</script>

<style scoped>
.QR_code {
  padding: 40rpx;
  border-radius: 15rpx;
  background-color: #fff;
}
.title {
  font-size: 42rpx;
  font-weight: bold;
}
.QR_top {
  display: flex;
  justify-content: space-between;
}
.order_details {
  font-size: 24rpx;
  margin-top: 15rpx;
  color: #9c9c9c;
}
.QR_t_fr {
  font-size: 42rpx;
  color: #ff9a00;
  font-weight: bold;
}
.QR_t_fr text {
  font-size: 24rpx;
  font-weight: normal;
  margin-right: 10rpx;
}
.QR_code_img {
  text-align: center;
  margin: 40rpx 0;
}
.QR_code_img image {
  width: 300rpx;
  height: 300rpx;
}
.QR_code_img .tips {
  font-size: 28rpx;
  margin-top: 20rpx;
}
.contain {
  padding: 40rpx;
  background: #fff;
  margin: 30rpx 0;
  border-radius: 15rpx;
}
.contain_content {
  font-size: 24rpx;
  color: #6a6a6a;
  margin: 40rpx 0 20rpx;
  line-height: 1.75;
}
.seeDetails {
  font-size: 24rpx;
  color: #4d8ff1;
}
.date-info {
  padding: 40rpx;
  background: #fff;
  border-radius: 15rpx;
  font-size: 32rpx;
}
.date-info .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15rpx 0;
}
</style>
